//1.引入模块
const gulp = require("gulp");
const sass = require("gulp-sass");
sass.compiler = require('node-sass');
const htmlmin = require("gulp-htmlmin");
const cssmin = require("gulp-clean-css");
const jsmin = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const babel = require("gulp-babel");
//gulp src,dest,watch,pipe,task

//2.创建任务
gulp.task('mysass', function () {
    return gulp.src('./src/sass/**/*.scss')
        .pipe(sass({
            outputStyle: "compressed"
        }).on('error', sass.logError))
        .pipe(gulp.dest('./src/css'));
});

//sass的监听任务
gulp.task('sass:watch', function () {
    gulp.watch('./src/sass/**/*.scss', ['mysass']);
});

//html压缩的任务
gulp.task("htmlmin", function () {
    gulp.src(["./src/*.html", "./src/*.htm"])
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest("./dist"))
});

// 找一个模块 把 src下的css压缩合并到 dist目录
gulp.task("cssmin", function () {
    gulp.src(["./src/css/*.css", "./src/css/**/*.css"])
        .pipe(cssmin())
        .pipe(gulp.dest("./dist/css"));
})

//创建js压缩的任务
gulp.task("jsmin", function () {
    gulp.src(["./src/js/**/*.js", "./src/js/*.js"])
        .pipe(babel()) //压缩js之前,把es6代码编译成es5的代码
        .pipe(jsmin())
        .pipe(gulp.dest("./dist/js"));
})

//压缩图片的任务
gulp.task("imagemin", function () {
    gulp.src(['./src/images/*.{png,jpg,gif,svg,jpeg}', './src/**/*.{png,jpg,gif,svg,jpeg}'])
        .pipe(imagemin())
        .pipe(gulp.dest("./dist/images"))
})


//项目做完了,做一次就好了
gulp.task("default", ["htmlmin", "jsmin", "cssmin", "imagemin"])